<template>
	<div ref="refloadMore" class="loadMoreList" v-loading="isLoading" element-loading-text="Loading...">
		<ul class="recommendList">
			<li v-for="item in recommendList" class="recommendCard">
				<div class="imgArea">
					<img :src="item.cover[0]" alt="" style="width: 224px;height:125.88px;vertical-align: middle;">
					<span class="player"></span>
				</div>
				<div style="height: 44px;padding-top: 10px;padding-left: 10px;">
					<span class="video-type">{{VideoType(item.aiyigeApplication)}}</span>
					<span style="font-size: 14px;">{{item.title}}</span>
				</div>
				<p style="font-size: 12px;color: #b1b5c1;padding-left:10px;margin:5px 0px;">
					{{item.statisticsBackup.viewCount}}人浏览
				</p>
				<div style="font-size: 12px;padding-left: 10px;color: #b1b5c1;">
					<span class="praiseCount">&nbsp;{{item.statisticsBackup.praiseCount}}</span>
					<span class="commentCount">&nbsp;{{item.statisticsBackup.commentCount}}</span>
					<span class="favoriteCount">&nbsp;{{item.statisticsBackup.favoriteCount}}</span>
				</div>
				<span v-if="item.momentClassificationBackup.originalStatement===1" class="originalStatement">原创</span>
				<div
					style="border-top: 1px solid #ebeced; margin-top:5px; font-size:12px;line-height: 38px;padding-left:19px;">
					<img class="avatar" :src="item.creatorBackup.avatar">
					<span>&nbsp;{{item.creatorBackup.name}}</span>
					<span
						style="color: #b1b5c1;position: absolute;right: 12px;bottom: 0px;">{{time(item.createTime)}}</span>
				</div>
			</li>
			<div class="loadMore" v-loading="MoreLoading" element-loading-text="Loading..." @click="loadMore">加载更多</div>
		</ul>
		<backTop></backTop>
	</div>
</template>


<script setup>
	import {
		onMounted,
		ref,
		watch
	} from "vue";
	import backTop from "@/views/backTop/index.vue"
	import resourceApi from "@/api/resource/index";
	import router from "@/Router/index"
	const isLoading = ref(false);
	const MoreLoading = ref(false);
	//推荐列表数据
	const recommendList = ref();
	const refloadMore = ref();
	const pageNum = ref(1);
	const localCache = ref(20)
	const path=ref("/home/resource/recommend");
	//处理时间戳
	function time(time3) {
		var date = new Date(time3);
		var Y = date.getFullYear() + '-';
		var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
		var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
		var strDate = Y.slice(2) + M + D;
		return strDate
	}
	//视频类型
	function VideoType(type) {
		if (type == "ios") {
			return "作品"
		} else if (type == "android") {
			return "动态"
		} else {
			return "教程"
		}
	}
	//浏览器滚动的事件函数
	function windowScrollListener() {
		//获取操作元素最顶端到页面顶端的垂直距离
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		// windowHeight是可视区的高度
		var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
		// scrollHeight是滚动条的总高度
		var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
		// 滚动条到底部
		if (scrollTop + windowHeight >= scrollHeight) {
			// 到了底部之后想做的操作,如到了底部之后加载
			MoreLoading.value = true;
			resourceApi.getRecommend(1, 20)
				.then((res) => {
					recommendList.value = recommendList.value.concat(res.content);
					MoreLoading.value = false;
				})
			window.removeEventListener('scroll', windowScrollListener)
		}
	}
	//点击加载更多
	function loadMore() {
		if(path.value==="/home/resource/recommend"){
			pageNum.value = 1;
			localCache.value = 20;
			MoreLoading.value = true;
			resourceApi.getRecommend(pageNum.value, localCache.value)
				.then((res) => {
					recommendList.value = recommendList.value.concat(res.content);
					MoreLoading.value = false;
				})
		}
		else if(path.value==="/home/resource/information"){
			MoreLoading.value = true;
			resourceApi.getInformation(1)
				.then((res) => {
					recommendList.value=recommendList.value.concat(res.content);
					MoreLoading.value = false;
				})
		}
		else{
			pageNum.value = 1;
			localCache.value = 20;
			MoreLoading.value = true;
			resourceApi.getRecommend(pageNum.value, localCache.value)
				.then((res) => {
					recommendList.value = recommendList.value.concat(res.content);
					MoreLoading.value = false;
				})
		}
	}
	onMounted(() => {
		//获取推荐列表
		refloadMore.value.style.height = "300px"
		isLoading.value = true;
		resourceApi.getRecommend()
			.then((res) => {
				recommendList.value = res.content;
				isLoading.value = false;
				refloadMore.value.style.height = "100%"
			})
		//绑定浏览器的滚动事件
		window.addEventListener('scroll', windowScrollListener);
	})
	//监听路由的变化并且获取最新的路由地址
	watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
		path.value=newValue;
		//激活绑定浏览器的滚动事件
		window.addEventListener('scroll', windowScrollListener);
		if (newValue === "/home/resource/information") {
			isLoading.value = true;
			recommendList.value=[];
			resourceApi.getInformation(1)
				.then((res) => {
					recommendList.value = res.content;
					isLoading.value = false;
				})
		} else if (newValue === "/home/resource/recommend") {
			isLoading.value = true;
			recommendList.value=[];
			resourceApi.getRecommend()
				.then((res) => {
					recommendList.value = res.content;
					isLoading.value = false;
				})
		}else if(newValue.includes("/home/resource")){
			isLoading.value = true;
			recommendList.value=[];
			resourceApi.getRecommend()
				.then((res) => {
					recommendList.value = res.content;
					isLoading.value = false;
				})
		}
	}, {
		immediate: true
	})
</script>

<style scoped>
	/* 清除样式 */
	ul,
	li {
		padding: 0;
		margin: 0;
		list-style: none
	}

	.loadMoreList {
		width: 1200px;
		margin: 0 auto;
	}

	.recommendList {
		display: flex;
		flex-wrap: wrap;
	}

	.recommendCard {
		width: 224px;
		height: 280px;
		border-radius: 5px;
		overflow: hidden;
		margin: 0 8px;
		margin-top: 20px;
		position: relative;
		background-color: #fff;
	}

	.player::after {
		content: "\e663";
		font-family: "iconfont";
		position: absolute;
		color: #b4bec1;
		font-size: 25px;
		left: 10px;
		top: 90px;
	}

	.imgArea:hover {
		opacity: 0.5;
	}

	.video-type {
		display: inline-block;
		border: 1px solid;
		border-radius: 5px;
		font-size: 12px;
		padding: 2px 4px;
		margin-left: -6px;
		transform: scale(68%);
		font-weight: 700;
	}

	.praiseCount:before {
		content: "\e8c3";
		font-family: "iconfont";
	}

	.commentCount:before {
		content: "\e63a";
		font-family: "iconfont";
	}

	.favoriteCount:before {
		content: "\e8c7";
		font-family: "iconfont";
	}

	.praiseCount,
	.commentCount,
	.favoriteCount {
		padding-right: 15px;
	}

	.originalStatement {
		color: #fff;
		display: inline-block;
		background: #fb4ead;
		width: 40px;
		height: 22px;
		text-align: center;
		font-size: 14px;
		border-radius: 8px 8px 8px 0px;
		line-height: 22px;
		position: absolute;
		top: 6px;
		left: 6px;
	}

	.avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		vertical-align: middle;
	}

	.loadMore {
		width: 140px;
		height: 40px;
		margin: 50px auto;
		font-size: 14px;
		color: #82858e;
		cursor: pointer;
		text-align: center;
		background-color: #fff;
		line-height: 40px;
		border-radius: 4px;
	}
</style>
